//变量声明
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
//定义背景图片，小球，挡板
var bg, ball, board;
var cW = myCanvas.width,
    cH = myCanvas.height;
//定义挡板，挡板宽高以及x轴以及y轴坐标
var board, boardW = 100,
    boardH = 20,
    boardX = cW / 2 - boardW / 2,
    boardY = 350;
//定义小球，小球的定时器，小球的宽高以及x,y轴坐标
var ball, ballTimer, flag = 0,
    ballWH = 20,
    ballX = boardX + boardW / 2 - ballWH / 2,
    ballY = boardY - ballWH;
//定义砖块数组
var bricks = [];
//判断游戏是否结束和成功
var game_over = 0,
    game_success = 0;

//设置小球x轴，y轴的速度
var speedX = -5,
    speedY = -5;
bg = getImage("images/background.jpg");
board = getImage("images/paddle.png");
ball = getImage("images/ball.png");

//函数定义
function getImage(obj) {
    var img = new Image();
    img.src = obj;
    return img;
}
//清屏函数
clearCanvas = function () {
    ctx.clearRect(0, 0, cW, cH);
}
//初始化页面函数
init = function () {
    ctx.drawImage(bg, 0, 0, cW, cH);
    ctx.drawImage(board, boardX, boardY, boardW, boardH);
    ctx.drawImage(ball, ballX, ballY, ballWH, ballWH);
    updateBrick();
    ballAndBricks();
}
//初始化砖块
function creatBrickList() {
    for (var i = 0; i < 5; i++) {
        for (var j = 0; j < 8; j++) {
            var brick = new Brick(i, j);
            bricks.push(brick);
        }
    }
}
//单个砖块的绘制函数
function Brick(i, j) {
    this.w = 70;
    this.h = 30;
    this.x = 100 + (this.w + 1) * j;
    this.y = 10 + (this.h + 1) * i;
    this.img = getImage("images/block002.png");
    this.drawBrick = function () {
        ctx.drawImage(this.img, this.x, this.y, this.w, this.h);
    }
}
//更新砖块
updateBrick = function () {
    for (var i = 0; i < bricks.length; i++) {
        var brick = bricks[i];
        brick.drawBrick();
    }
}
//更新小球
updateBall = function () {
    if (ballY >= cH) {
        clearInterval(ballTimer);
        console.log(game_over);
        game_over = 1;
        gameOver();

    }
    if (game_over == 0) {
        if (ballY <= 0) {
            ballY = 0;
            speedY *= -1;
        }
        if (ballX <= 0) {
            ballX = 0;
            speedX *= -1;
        }
        if (ballX >= cW) {
            ballX = cW - ballWH;
            speedX *= -1;
        }
        // if (ballX <= boardX + boardW && ballX >= boardX && ballY >= boardY - ballWH && ballY <= boardY + boardH - ballWH && flag == 1) {
        //     ballX = boardX + boardW / 2 - ballWH / 2;
        //     speedY *= -1;
        // }
        if (flag == 1) {
            ballAndBoard();
        }
        flag = 1;
        ballX += speedX;
        ballY += speedY;
        init();
    }
}
//小球与挡板的碰撞
ballAndBoard = function () {
    if (isHit(ballX, ballY, boardX - ballWH, boardY - ballWH, boardX + boardW, boardY + boardH)) {
        speedY *= -1;
    }
}
//小球与砖块的碰撞
ballAndBricks = function () {
    for (var i = 0; i < bricks.length; i++) {
        var brick = bricks[i];
        if (isHit(ballX, ballY, brick.x - ballWH, brick.y - ballWH, brick.x + brick.w, brick.y + brick.h)) {
            bricks.splice(i, 1);
            speedY *= -1;
            if (bricks.length == 0) {
                game_success = 1;
                clearInterval(ballTimer);
                success();
            }
        }
    }
}
//碰撞判断
function isHit(x, y, minX, minY, maxX, maxY) {
    if (x >= minX && x <= maxX && y >= minY && y <= maxY) {
        return true;
    } else {
        return false;
    }
}
//成功过关
success = function () {
    clearCanvas();
    ctx.fillText("success!", myCanvas.width / 2, myCanvas.height / 2);
}
//失败
gameOver = function () {
    clearCanvas();
    ctx.font = "bold 60px serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillStyle = "#fff";
    ctx.fillText("Game Over", myCanvas.width / 2, myCanvas.height / 2);
}
//事件


// bg.onload = function () {
//     ctx.drawImage(bg, 0, 0, cW, cH);
// }
// board.onload = function () {
//     ctx.drawImage(board, boardX, boardY, boardW, boardH);
// }
// ball.onload = function () {
//     ctx.drawImage(ball, ballX, ballY, ballWH, ballWH);
// }


//键盘点击事件
document.onkeydown = function (e) {
    console.log(e.keyCode);
    //如果是移动键就左右移动挡板
    if (e.keyCode == 37 && boardX >= 0) {
        //小球未发射状态，挡板移动，小球也需要跟着移动
        if (ballX == (boardX + boardW / 2 - ballWH / 2) && ballY == (boardY - ballWH)) {
            ballX -= boardW;
        }
        boardX -= boardW;
        if (boardX < 0) {
            boardX = 0;
            ballX = (boardX + boardW / 2 - ballWH / 2);
        }
        clearCanvas();
        init();
    } else if (e.keyCode == 39 && boardX < cW - boardW) {
        if (ballX == (boardX + boardW / 2 - ballWH / 2) && ballY == (boardY - ballWH)) {
            ballX += boardW;
        }
        boardX += boardW;
        if (boardX > cW - boardW) {
            boardX = cW - boardW;
            ballX = (boardX + boardW / 2 - ballWH / 2);;
        }
        clearCanvas();
        init();
    }
    //如果是空格键发射小球
    if (e.keyCode == 32) {
        // clearCanvas();
        ballTimer = setInterval(updateBall, 30);
    }
}
//初始化
creatBrickList();
ctx.font = "bold 60px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#fff";